<template>
  <div>

    <ul>
      <li>
        <router-link :to="{name:'First',query:{id:'2b',name:'周亮'}}">我是第一个</router-link>
      </li>
      <li>
        <router-link to="/second">我是第二个</router-link>
      </li>
      <li>
        <router-link :to="{name:'third',params:{id:'2',name:'何翔'},query:{hobby:'吃翔',gender:'女'}}">我是第三个</router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
ul {
  display: flex;
  li {
    margin: 20px;
  }
}
// .router-link-exact-active {
//   background-color: red;
// }
// .aa{
//   background-color: yellowgreen;
// }
.cc{
  background-color: pink;
}
</style>
